<template>
  <view class="tabsBottom">
    <view class="tabs2">
      <view :class="['tabs2Item', state.tabId === item.id ? 'tabs2ItemHover' : '']" v-for="(item,index) in tabs2" :key="index" @click="changeTab2(item)">
        {{item?.name}}
      </view>
    </view>
    <view class="list">
      <view class="listItem" v-for="(item, index) in userInfo" :key="index">
        <view class="itemTop">
          <view class="left">
            <image :src="item?.head_img" />
            <view class="leftRight">
              <view class="h3">{{item?.nickname}}</view>
              <view class="p">ID:{{item?.id}}</view>
            </view> 
          </view>
          <view class="middle">
            <text class="text01">订单价格</text>
            <text class="text02">{{item?.price}}</text>
          </view>
          <view class="middle right">
            <text class="text01">已支付</text>
            <text class="text02">{{item?.yet_price}}</text>
          </view>
        </view>
        <view class="itemBottom">
          <view class="top1">
            <view class="text"></view>
            <view class="text01">名称</view>
            <view class="text02">初稿</view>
            <view class="text03">修改</view>
            <view class="text04">降重</view>
          </view>
        </view>
        <ProgressBar :item="item"/>
      </view>
    </view>
    <view class="addBtn" @click="addBtn">
      <uni-icons type="plusempty" size="30"></uni-icons>
    </view>
  </view>
  <AddUserInfo ref="addRef" @change-student="changeStudent" @refresh="refresh"/>
</template>

<script setup>
  import { ref, reactive } from 'vue'
  import { tabs2 } from '../data.js'
  import AddUserInfo from './add.vue'
  import { onShow } from '@dcloudio/uni-app'
  import ProgressBar from '@/components/progress.vue'
  
  const emits = defineEmits(["getCustomer"]);
  const props = defineProps(['userInfo'])
  
  const addRef = ref(null)
  const state = reactive({
    tabId: 1,
    pageNo: 1,
    studentId: null
  })
  const changeStudent = (stuId) => {
    console.log(75, stuId)
    state.studentId = stuId
  }

  // const message = computed({
  //   get() {
  //     return props.modelValue;
  //   },
  //   set(newValue) {
  //     emits(`update:modelValue`, newValue);
  //   }
  // });
  onShow(() => {
   refresh()
  })
  const refresh = () => {
     emits('getCustomer', {tabId: state.tabId, pageNo: state.pageNo})
  }
  // 点击底部工文tab
  const changeTab2 = (item) => {
    state.tabId = item.id
    emits('getCustomer', {tabId: item.id, pageNo: state.pageNo})
  }
  // 点击添加
  const addBtn = () => {
    addRef.value.openPopup()
  }
</script>

<style lang="scss" scoped>
  .tabsBottom{
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 30rpx;
      width: 714rpx;
      // height: 600rpx;
      overflow: auto;
      .tabs2{
        display: flex;
        flex-direction: row;
        justify-content: center;
        width: 100%;
        border-bottom: 2rpx solid rgba(65, 65, 65, 1);
        padding-bottom:30rpx;
        .tabs2Item{
          width: 64rpx;
          height: 34rpx;
          border-radius: 6rpx;
          border: 2rpx solid rgba(107, 107, 107, 1); 
          font-family: HarmonyOS Sans SC;
          font-weight: 400;
          font-size: 24rpx;
          text-align: center;
          color: rgba(122, 122, 122, 1);
          margin-left: 30rpx;
          margin-right: 30rpx;
        }
        .tabs2ItemHover{
          border: 2rpx solid rgba(11, 105, 218, 1);
          background: rgba(209, 218, 243, 1);
          color: rgba(11, 105, 218, 1);
        }
      }
      .list{
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 540rpx;
        overflow-y: scroll;
        .listItem{
          width: 100%;
          border-radius: 14rpx;
          margin-top:30rpx;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          .itemTop{
            width: 100%;
            height: 142rpx;
            border-radius: 14rpx;
            background: #ffffff;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            .left{
              margin-left: 48rpx;
              display: flex;
              flex-direction: row;
              image{
                width: 102rpx;
                height: 102rpx;
                border-radius: 100%;
                background: #cccccc;
              }
              .leftRight{
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                width: 164rpx;
                margin-left: 20rpx;
                .h3{
                  width: 100rpx;
                  font-family: PingFang SC;
                  font-weight: 400;
                  font-size: 32rpx;
                  color: rgba(70, 70, 70, 1);
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;  
                }
                .p{
                  margin-top: 10rpx;
                  font-family: PingFang SC;
                  font-weight: 400;
                  font-size: 28rpx;
                  color: rgba(169, 169, 169, 1);
                }
              }
            }
            .middle{
              display: flex;
              flex-direction: column;
              align-items: center;
              .text01{
                font-family: PingFang SC;
                font-weight: 400;
                font-size: 16rpx;
                text-align: center;
                color: rgba(35, 35, 35, 0.52);
              }
              .text02{
                font-family: PingFang SC;
                font-weight: 600;
                font-size: 48rpx;
                text-align: center;
                color: rgba(62, 62, 62, 1);
              }
            }
            .right{
              margin-right: 48rpx;
            }
          }
          .itemBottom{
            width: 686rpx;
            // height: 100rpx;
            border-radius: 0 0 14rpx 14rpx;
            background: rgba(11, 105, 218, 0.25);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding-top:20rpx;
            padding-bottom: 20rpx;
            .top1{
              width: 100%;
              display: flex;
              align-items: center;
              flex-direction: row;
              font-family: HarmonyOS Sans SC;
              font-weight: 400;
              font-size: 24rpx;
              text-align: center;
              color: rgba(122, 122, 122, 1);
              .text{
                width: 116rpx;
              }
              .text01{
                width: 220rpx;
                overflow:hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }
              .text02{
                width: 50rpx;
              }
              .text03{
                width: 220rpx;
              }
              .text04{
                width: 50rpx;
              }
            }
            .top2{
              width: 650rpx;
              height: 64rpx;
              border-radius: 6rpx;
              background: rgba(209, 243, 241, 1);
              margin-top: 10rpx;
              display: flex;
              align-items: center;
              flex-direction: row;
              font-family: HarmonyOS Sans SC;
              font-weight: 400;
              font-size: 20rpx;
              text-align: center;
              .text{
                width: 116rpx;
              }
              .text01{
                width: 200rpx;
                overflow:hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }
              .text02{
                width: 50rpx;
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: center;
                .span{
                  width: 28rpx;
                  height: 26rpx;
                  border-radius: 6rpx;
                  border: 2rpx solid rgba(11, 105, 218, 1);
                }
                .spanHover{
                  background: rgba(28, 246, 21, 1);
                }
              }
              .text03{
                width: 220rpx;
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: center;
                .span{
                  width: 28rpx;
                  height: 26rpx;
                  border-radius: 6rpx;
                  border: 2rpx solid rgba(11, 105, 218, 1);
                  margin-right:6rpx;
                }
                .spanHover{
                  background: rgba(28, 246, 21, 1);
                }
              }
              .text04{
                width: 50rpx;
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: center;
                .span{
                  width: 28rpx;
                  height: 26rpx;
                  border-radius: 6rpx;
                  border: 2rpx solid rgba(11, 105, 218, 1);
                }
                .spanHover{
                  background: rgba(28, 246, 21, 1);
                }
              }
            }
          }
        }
      }
    }
    .addBtn{
      width: 714rpx;
      height: 142rpx;
      border-radius: 14rpx;
      border: 2rpx solid rgba(0, 0, 0, 0.28);
      display: flex;
      justify-content: center;
      align-items: center;
      background: rgba(231, 231, 231, 0.59);
      margin-top: 40rpx;
      margin-bottom: 60rpx;
    }
  
</style>